<template>
  <div>
    <div class="main-head flex-between container-fluid">
      <div class="title">
        <h1 v-text="$t('pro.admin.DailyReportManager')"></h1>
      </div>
    </div>
    <div class="content container-fluid">
      <div class="portlet">
        <div class="tools">
          <a-button type="primary" @click="addReport" v-text="$t('pro.admin.Add')"></a-button>
        </div>
        <div>
          <a-table
            :columns="columns"
            :dataSource="dataSource"
            :scroll="{x: '100%'}"
          >
            <template slot="active" slot-scope="text, record">
              {{record.active ? 'Active' : 'No Active'}}
            </template>
            <template slot="action" slot-scope="text, record">
              <a-button
                type="primary"
                shape="circle"
                size="small"
                icon="edit"
                title="Edit"
                @click="editIt(record)"
              />&nbsp;
              &nbsp;
              <a-button
                type="primary"
                shape="circle"
                size="small"
                icon="delete"
                title="Delete"
                @click="deleteIt(record)"
              />
            </template>
          </a-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
const dataSource = [
  {
    id: 1,
    key: '1',
    email: '123@126.com',
    companyName: '熏风科技',
    active: true,
  }
]
export default {
  data() {
    return {
      dataSource
    }
  },
  methods: {
    addReport() {
      this.$router.push({
        path: `/admin/editdailyreport`
      })
    },
    editIt(record) {
      this.$router.push({
        path: `/admin/editdailyreport`,
        query: {
          id: record.id,
          email: record.email,
          active: record.active
        }
      })
    },
    deleteIt(record) {
      this.$confirm({
        title: this.$t('pro.admin.delText'),
        content: `#${record.id}`,
        okText: this.$t('pro.public.buttonYes'),
        okType: "danger",
        cancelText: this.$t('pro.public.buttonNo'),
        onOk: () => {

        },
        onCancel() {}
      });
    },
  },
  computed: {
    columns(){
        return this.$t('pro.admin.Managercolumns')
    },
  }
}
</script>
